<script setup lang="ts">
import { onMounted, ref } from 'vue';
import MoreCommunityHeader from './MoreCommunityHeader.vue';
import { getCommunityList } from '@/api/community';
import { Community } from '@/api/community/type';
import { router } from '@/router';

const communityList = ref([] as Community[]);

onMounted(() => {
    getCommunityList().then((res) => {
        communityList.value = res.data;
    })
})

const toCommunity = (item: Community) => {
    router.push({
        name: "CommunityHome",
        query: {
            'id': item.id
        }
    });
}

</script>

<template>
    <div class="more-container">
        <MoreCommunityHeader></MoreCommunityHeader>
        <div class="content">
            <div v-for="item in communityList" class="item" @click="toCommunity(item)">
                <van-image radius="7px"
                    width="70"
                    height="70"
                    :src="item.url"
                />
                <p>{{ item.name }}</p>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.more-container {
    margin-top: 3%;
    width: 88%;
    border-radius: 15px;
    background-color: white;
    padding-left: 3%;
    padding-right: 3%;
    max-height: 30%;
    .content {
        display: flex;
        margin-bottom: 10px;
        width: 100%;
        .item {
            margin-left: 10px;
            margin-right: 10px;
            p {
                display: flex;
                margin: 0;
                justify-content: center;
            }
        }
    }
}
</style>